Skip to content

Conversation

@syedszeeshan
Copy link
Collaborator

@syedszeeshan syedszeeshan commented Oct 8, 2025

Before (the change)

After (the change)

Make sure that you've checked the boxes below before you submit the PR

  • I have read and followed the setup steps
  • I have created necessary unit tests
  • I have tested the functionality in both React and Angular.

Steps needed to test

For testing, you can add a border to the newly added styles in ::before and visually verify the increased clickable area, as in the screenshot below

image

@syedszeeshan syedszeeshan force-pushed the Syed/2361-UI-clickablearea branch 2 times, most recently from 5d8fd63 to 79bcb45 Compare October 10, 2025 16:55
@syedszeeshan syedszeeshan changed the title NOT READY - feat(#2361): increase clickable area for radio and checkbox feat(#2361): increase clickable area for radio and checkbox Oct 10, 2025
@syedszeeshan syedszeeshan marked this pull request as ready for review October 10, 2025 19:31
@syedszeeshan syedszeeshan linked an issue Oct 10, 2025 that may be closed by this pull request
// - matrix\(1, 0, 0, 1, = identity matrix
// - -2[0-9.]+ = negative number starting with -2 (e.g., -22, -23.6)
// - Flexible pattern accounts for border widths and sub-pixel rendering
expect(beforeStyles.transform).toMatch(/matrix\(1, 0, 0, 1, -2[0-9.]+, -2[0-9.]+\)/);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is extremely specific and I think very brittle. After the tests above, I'm not sure this is adding anything useful, and would make the test far more brittle than I would like.

// - (-22, -22) = translate by -22px in X and Y directions
// Math: 50% of 44px = 22px, so translate(-50%, -50%) = translate(-22px, -22px)
// This centers the 44px touch target on the 24px icon
expect(beforeStyles.transform).toBe("matrix(1, 0, 0, 1, -22, -22)");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as the one I made for the Checkbox tests

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is ok

@syedszeeshan syedszeeshan changed the base branch from alpha to dev November 5, 2025 21:27
@chrisolsen chrisolsen merged commit 73057cd into dev Nov 20, 2025
4 checks passed
@chrisolsen chrisolsen deleted the Syed/2361-UI-clickablearea branch November 20, 2025 23:05
@tzuge
Copy link
Collaborator

tzuge commented Nov 20, 2025

🎉 This PR is included in version 1.40.0-dev.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

@tzuge
Copy link
Collaborator

tzuge commented Nov 20, 2025

🎉 This PR is included in version 6.10.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@tzuge
Copy link
Collaborator

tzuge commented Nov 26, 2025

🎉 This PR is included in version 4.10.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@tzuge
Copy link
Collaborator

tzuge commented Nov 28, 2025

🎉 This PR is included in version 1.10.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Radio Item and Checkbox: Increase clickable area

6 participants